<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jq基础06</title>
		<style type="text/css">
			div{
				border: 1px solid red;
				padding: 10px;
				font-size: 30px;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<div id="div1">这是div1
			<div id="div2">这是div2</div>
			<div id="div3">这是div3</div>
			<div id="div4">这是div4</div>
				<div id="div5">这是div5</div>
				<div id="div6">这是div6
					<div id="div7">这是div7</div>
				</div>
		</div>
		<script src="../19/jquery-2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//利用元素之间的关系查找元素
			//1.找元素的父元素
//			$("#div1").parent().css("background","pink")
			//2.找元素的所有直系祖先元素
//			$("#div7").parents().css("background","#00BFFF")
			//3.找到某个指定的祖先元素停止,不包含指定的元素.
//			$("#div7").parentsUntil("#div1").css("background","#7CFC00")

			//4.找到元素的所有子元素
//			$("body").children().css("background","antiquewhite")
			//5.找到元素的所有后代元素
//			$("body").find("*").css("background","bisque")

			//6.找到上一个兄弟元素
//			$("#div3").prev().css("background","#DAA520")
			//7.找到上面所有的兄弟元素
//			$("#div4").prevAll().css("background","#DAA520")
			//8.找到上面某个兄弟元素停止,不包含指定的兄弟元素.
//			$("#div4").prevUntil("#div2").css("background","#DAA520")

			//9.找到下一个兄弟元素
//			$("#div2").next().css("background","#DAA520")
			//10.找到下面某个兄弟元素停止,不包含指定的兄弟元素.
//			$("#div2").nextUntil("#div4").css("background","#DAA520")
			//11.找到下面所有的兄弟元素
//			$("#div2").nextAll().css("background","#DAA520")

			//12.找到所有的兄弟元素
			$("#div3").siblings().css("background","#DAA520");
		</script>
	</body>
</html>
